<template>
  <div>
    <input type="text" v-model="value">
    <button @click="addPerson">添加</button>
    <ul>
        <li v-for="person in PeopleList" :key="person.id">{{ person.name }}</li>
    </ul>
    <h1>当前的值为:{{ sum }}</h1>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';
import { mapState } from 'vuex';
export default {
  name: "PersonsList",
  data() {
    return {
      value: "",
    };
  },
  computed:{
    ...mapState("addAbout",["sum"]),
    ...mapState("personAbout",["PeopleList"])
  },
  methods:{
    addPerson(){
        const obj = {
            id:nanoid(),
            name:this.value
        }
        this.$store.dispatch("personAbout/addPersonWang",obj)
        this.value=""

    }
  }
};
</script>

<style scoped>
</style>
